@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

    <Tabs>
        <TabPane Key="1">
            <Tab>Example 1</Tab>
            <ChildContent>
                <AntDesign.Charts.Column Data="data1" Config="config1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="2">
            <Tab>Example 2</Tab>
            <ChildContent>
                <AntDesign.Charts.Column Data="data2" Config="config2" />
            </ChildContent>
        </TabPane>
    </Tabs>

@code{

    #region Example 1

    object[] data1 =
    {
        new
        {
            year = "1991",
            value = 31
        },
        new
        {
            year = "1992",
            value = 41
        },
        new
        {
            year = "1993",
            value = 35
        },
        new
        {
            year = "1994",
            value = 55
        },
        new
        {
            year = "1995",
            value = 49
        },
        new
        {
            year = "1996",
            value = 15
        },
        new
        {
            year = "1997",
            value = 17
        },
        new
        {
            year = "1998",
            value = 29
        },
        new
        {
            year = "1999",
            value = 33
        }
    };

    ColumnConfig config1 = new ColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "Chart title and description"
        },
        Description = new Description
        {
            Visible = true,
            Text = "This is a demo about configuring the chart title and description text content"
        },
        XField = "year",
        YField = "value"
    };

    #endregion Example 1

    #region Example 2

    object[] data2 =
    {
        new
        {
            year = "1991",
            value = 31
        },
        new
        {
            year = "1992",
            value = 41
        },
        new
        {
            year = "1993",
            value = 35
        },
        new
        {
            year = "1994",
            value = 55
        },
        new
        {
            year = "1995",
            value = 49
        },
        new
        {
            year = "1996",
            value = 15
        },
        new
        {
            year = "1997",
            value = 17
        },
        new
        {
            year = "1998",
            value = 29
        },
        new
        {
            year = "1999",
            value = 33
        }
    };

    ColumnConfig config2 = new ColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "Chart title and description",
            Style = new TextStyle
            {
                Fill = "#1c3747"
            }
        },
        Description = new Description
        {
            Visible = true,
            Text = "This is a demo to configure the chart title and description text style",
            Style = new TextStyle
            {
                Fill = "#177ca6",
                FontSize = 14,
            }
        },
        XField = "year",
        YField = "value"
    };

    #endregion Example 2

}